<template>
  <div class="noticesee">
    <TopFilter
      :list="topFilterList"
      :cols="3"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>

    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns"
    >
    </FilterTable>

    <!-- <div class="noticeRight">
        <div class="noticeGroup" v-show="isNotice" >
          <h2 class="noticeGrouptitle">提示</h2>
          <div class="noticeGroupcontent"><p>{{noticeMsg}}</p></div>
          <div @click="cancle" class="el-notification__closeBtn el-icon-close"></div>
          <p class="btn" @click="cancle('btn',index)">知道了</p>
        </div>
    </div> -->
  </div>
</template>

<script>
import { getNoticeData,getSelectMsgType } from '@/api/common/notice/noticemanage/noticesee/';
import { dictionary } from '@/utils/dictMixin';
import moment from 'moment'
export default {
  name: 'noticesee',
  mixins: [dictionary],
  
  data() {
    return {
      dialogVisible: true,
      topFilterList: this.createTopFilters(),
      fetchParams: {},
      visible: false,
      // isNotice:true,
      // noticeMsg:'这是一条通知消息1',
      dialogTitle: '',
      fetchApi: getNoticeData,
      columns: this.createTableColumns(),
      handleType: '',
      formData: {},
      conf:{ add: '新增', edit: '设置',  },
      dataType:'',
      instance:''
    };
  },
  methods: {
    init(){
      getSelectMsgType().then(res=>{
        res.data.forEach((x,k)=>{
            this.topFilterList[2].itemList=this.topFilterList[2].itemList.concat([{ text: x.templateName, value: x.templateCode }])
        })
      })
    },
    createTopFilters() {
        return [    
            {
            type: 'INPUT',
            label: '关键字',
            fieldName: 'msgContent',
            placeholder: '请输入...',
            initialValue: '',
            style: { width: '200px' },
            },
            {
            type: 'RANGE_DATE',
            label: '通知时间',
            fieldName: 'beginTime|endTime',
            placeholder: '请输入...',
            initialValue: '',
            // rules: [{ required: false, trigger: 'blur' }],
            style: { width: '240px' },
            },
            {
            type: 'SELECT',
            label: '通知类型',
            fieldName: 'msgType',
            placeholder: '通知类型',
            style: { width: '200px' },
            itemList: [],
            }
        ];
    },
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 60,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.editHandle(props.row)}>
                  查看
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '通知时间',
          dataIndex: 'createdAt',
          sorter: true,
          width:200,
          //filter: true,
          filterType: 'input'
        },
        {
          title: '通知类型',
          dataIndex: 'msgType',
          sorter: true,
          //filter: true,
          width:200,
          filterType: 'input'
        },
        {
          title: '标题',
          dataIndex: 'msgContent',
          sorter: true,
          filterType: 'input'
        }
      ];
    },
    getCookie(){
        let allCookie=document.cookie.split(';')
        allCookie.forEach(x=>{
            if(x.indexOf('dataType') > -1 ){
              this.dataType=x.split('=')[1]
            }
        })
        //判断是否为厂端
        if(this.dataType != 10461001){
          this.columns[4].hidden=true
        }else{
          this.columns[4].hidden=false
        }
        
    },
    
    // 查看
    editHandle(row) {
      console.log(row,"row")
      //console.log(this.$route.query,"查询携带值")
      this.$router.push({path:row.tzUrl, query:{row}})
      // this.showHandler();
    },
    // showHandler() {
    //   this.dialogTitle = `${this.conf[this.handleType]}`;
    //   this.visible = true;
    // },
    // 关闭通知
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //搜索
    changeHandle(value) {
        console.log(value,"val")
        // 当天日期
        let currentDate = moment().format('YYYY-MM-DD')
        console.log(currentDate,"currentDate",`${moment(value.endTime).format('YYYY-MM-DD')}`)
        console.log(`${moment(value.endTime).format('YYYY-MM-DD')}` > `${currentDate}`)
        if(`${moment(value.endTime).format('YYYY-MM-DD')}` > `${currentDate}`) {
          this.$message({
            message: '未来日期不可选',
            type: 'info'
          });
        }else{
          this.fetchParams = Object.assign({ sort: 'wayId', order: 'desc'}, value);
        }
      
    },
    //重置
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    cancle(data,index){
      this.isNotice=false
      if(data == 'btn'){
        console.log('btn')
      }
    }
    // closeHandler(val, type) {
    //   this.visible = val;
    //   if (type === 'refresh') {
    //     // 重新加载
    //     this.fetchParams = { ...this.fetchParams };
    //   }
    // }
  },
   
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getCookie()
    this.init()
  },
  created() {
  }
};
</script>

<style lang="less" >
// .noticeRight{
//   position: fixed;
//   top:10px;
//   right: 0;
//   z-index: 99;
//   width: 22.5%;
// }
// .noticeGroup{
//     padding: 14px 26px 14px 13px;
//     border-radius: 8px;
//     box-sizing: border-box;
//     border: 1px solid #ebeef5;
//     background-color: #fff;
//     box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
//     transition: opacity .3s,transform .3s,left .3s,right .3s,top .4s,bottom .3s;
//     overflow: hidden;
//     .noticeGrouptitle{
//       font-weight: 900;
//     }
//     .noticeGroupcontent{
//       padding: 10px 0;
//     }

//     .btn{
//         border: 1px solid #1682e6;
//         background: #1682e6;
//         color: #fff;
//         font-size: 16px;
//         width: 22%;
//         text-align: center;
//         height: 24px;
//         line-height: 24px;
//         border-radius: 5px;
//         position: relative;
//         left: 81%;
//         cursor: pointer;
//     }
// }
.noticesee{
   .btn{
        border: 1px solid #1682e6;
        background: #1682e6;
        color: #fff;
        font-size: 14px;
        width: 23%;
        text-align: center;
        height: 24px;
        line-height: 24px;
        border-radius: 5px;
        // position: relative;
        // left: 274%;
        float: right;
        cursor: pointer;
    }
}

</style>
